{% extends "base_2col.html" %}
{% load i18n %}

{% block title %}{% trans "Overview of your profile" %}{% endblock %}
{% block robots %}noindex,nofollow{% endblock %}

{% block extrajs %}
{% if GOOGLE_MAPS_API_KEY and user.get_profile.location %}
  <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key={{ GOOGLE_MAPS_API_KEY }}" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      if (GBrowserIsCompatible()) {
        this.map = new GMap2(document.getElementById("location"));
        this.map.disableDragging();
        this.map.setCenter(new GLatLng({{ user.get_profile.latitude|default:"30" }}, {{ user.get_profile.longitude|default:"0" }}), 2);
        this.marker = new GMarker(new GLatLng({{ user.get_profile.latitude }}, {{ user.get_profile.longitude }}), {clickable: false, draggable: false});
        this.map.addOverlay(this.marker);
      }
    });
  </script>
{% endif %}
{% endblock %}

{% block nav-main %}
{% include "userprofile/menu.html" %}
{% endblock %}

{% block content %}
	{% load avatars %}
	<form action="" method="post">
	<fieldset>
		<legend>{% trans "Overview of your profile" %}</legend>
		<div id="avatar" class="span-3 center">
			<a href="{% url profile_edit_avatar %}">
				<img class="border" src="{% avatar 96 %}" />
			</a>
			<p><a href="{{ request.path_info }}edit/avatar/">{% if user.get_profile.has_avatar %}{% trans "Change avatar" %}{% else %}{% trans "Add avatar" %}{% endif %}</a></p>
		</div>
	
		<div class="span-9 last">
			<p><label for="id_user">{% trans "Username:" %}</label> {{ user }}</p>
			<p><label for="id_email">{% trans "E-mail:" %}</label>
				<span class="{% if not email or not validated %}quiet red{% endif %}">
				{%if not email %}{% trans "Not set yet" %}
				{% else %}{{ email }}
				{% if not validated %}{% trans " (Not validated)" %}
				{% endif %}{% endif %}
				</span>
			</p>
			<p>
			<label for="location">{% trans "Country" %}:</label>
			{% if user.get_profile.country %}
				{{ user.get_profile.get_country_display }}
			{% else %}
				<span class="quiet red">{% trans "Not set" %}</span>
			{% endif %}
			</p>
			{% if GOOGLE_MAPS_API_KEY %}
			<p>
			<label for="location">{% trans "Location" %}:</label>
			{% if user.get_profile.location %}
				{{ user.get_profile.location }}
			{% else %}
				<span class="quiet red">{% trans "Not set" %}</span>
			{% endif %}
			</p>
			{% endif %}
		</div>

		<hr class="space" />
		{% if user.get_profile.location %}
		<div class="span-12 last">
			<div id="location" style="width: 480px; height: 240px;"></div>
		</div>
		{% endif %}
	</fieldset>
	</form>
{% endblock %}

{% block content-related %}
	<div class="box">
		<h3>{% trans "Management:" %}</h3>
		<a href="{% url password_change %}">{% trans "Change password" %}</a>
		<br />
		<a href="{% url email_validation %}">{% if email %}{% trans "Change your e-mail address" %}{% else %}{% trans "Add your e-mail address" %}{% endif %}</a>
		{% if not validated and email %}<br /><a href="{% url email_validation_reset %}">{% trans "Resend validation e-mail" %}</a>
		{% endif %}
		<br />
		{% if not user.get_profile.location %}
			<a href="{% url profile_edit_location %}">{% trans "Add location" %}</a>
		{% else %}
			<a href="{% url profile_edit_location %}">{% trans "Change location" %}</a>
		{% endif %}
	</div>
{% endblock %}
